<template>
  <el-container>
    <el-main>
      <div style="border:2px groove black;width: 100%;height: 500px;">
        <Vcharts ref="pict" style="position: relative"></Vcharts>
      </div>
    </el-main>
    <el-aside width="500px">
      <el-row :gutter="0">
        <el-col :span="7" offset="3"><div class="grid-content bg-purple-light">
          <el-button type="primary" size="medium" round @click="getStart">程序启动</el-button>
        </div></el-col>
        <el-col :span="7" offset="3"><div class="grid-content bg-purple-light">
          <el-button id="endtest" type="primary" size="medium" round @click="getEnd">程序停止</el-button>
        </div></el-col>
      </el-row>
      <div>
        <el-tabs type="border-card" stretch="false" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="本次数据" name="first">
            <el-table
              :data="tableData0"
              :header-row-style="{height:'35px'}"
              :row-style="{height:'35px'}"
              border
              height="215"
            >
              <el-table-column
                prop="para"
                label="参数名称"
                width="155"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="meand"
                label="误差均值"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="stdev"
                align="center"
                label="误差标准差">
              </el-table-column>
            </el-table>

            <div style="margin-top: 5px">
            <Getimg ref="img0" :pictname="pictname0"></Getimg>
            </div>

          </el-tab-pane>
          <el-tab-pane label="往期数据" name="second">
            <div>
              <el-select v-model="selectflname" @change="searchSelect(selectflname)" placeholder="请选择">
                <el-option
                  v-for="item in predata"
                  :key="item.value"
                  :value="item.value">
                  <span style="float: left; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                </el-option>
              </el-select>

              <div style="margin-top: 5px">
              <el-input
                size="medium"
                placeholder="请输入开始时间"
                suffix-icon="el-icon-date"
                v-model="start_time">
              </el-input>
              </div>

              <div style="margin-top: 5px">
              <el-input
                size="medium"
                placeholder="请输入结束时间"
                suffix-icon="el-icon-date"
                v-model="end_time">
              </el-input>
              </div>
            </div>

            <div style="margin-top: 5px">
            <el-table
              :data="tableData1"
              :header-row-style="{height:'35px'}"
              :row-style="{height:'35px'}"
              border
              height="215"
            >
              <el-table-column
                prop="para"
                label="参数名称"
                width="155"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="meand"
                label="误差均值"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="stdev"
                align="center"
                label="误差标准差">
              </el-table-column>
            </el-table>
            </div>

            <div style="margin-top: 10px">
            <Getimg ref="img1" :pictname="pictname1"></Getimg>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

    </el-aside>

  </el-container>
</template>

<script>
  import axios from 'axios'
  // import Qs from 'qs'

  import Vcharts from "@/components/charts"
  import Getimg from "@/components/getimg"

  export default {
    name: 'Layout',
    components: {
      Vcharts,
      Getimg
    },

    data() {
      return {
        selectflag: false, //用于选择运行merge或者merge_from_file  false:merge  true:merge_from_file
        start_time: '',  // 数据开始节点选择
        end_time: '',  // 数据结束节点选择
        localflname : '', // 请求后端获得的历史数据file名称
        selectflname: '', // 本地数据file名称选择
        pictname0: '',
        pictname1: '',

        tableData0: [{
          para: '速度',
          meand: '',
          stdev: ''
        },
          {
            para: '航向',
            meand: '',
            stdev: ''
          },
          {
            para: '距离',
            meand: '',
            stdev: ''
          }],

        tableData1: [{
          para: '速度',
          meand: '',
          stdev: ''
        },
          {
            para: '航向',
            meand: '',
            stdev: ''
          },
          {
            para: '距离',
            meand: '',
            stdev: ''
          }],
        plugin: [{
          pName: 'Scale',
          events: {
            init(instance) {
              console.log(instance);
            }
          }
        }],
        presetLine: [{type: 'l', site: 50}, {type: 'v', site: 50}],
        predata: [{}],
        activeName: 'first',
        // url1: 'http://localhost',
        // url2: 'http://192.168.43.125',
        url1: 'http://192.168.11.129',
        port: ':8008',

      }
    },

    methods: {
      getEcho() {
        this.$axios({
          // url: this.url2 + this.port + '/echo',
          url: this.url1 + this.port + '/echo',
          method: 'get',
          params: {
            hello: "world",
            // instruction: "start",
          }
        }).then(response => {
          alert(response.data);
        }).catch(error => {
          // this.$Message.info("启动失败");
          console.log(error);
          alert("启动失败");
        })
      },

      // 控制程序启动
      getStart() {
        if(this.selectflag) {
          // selectflag==0 false 运行merge
          // selectflag==1 true 运行merge_from_file
          this.$axios({
            // url: this.url2 + this.port + '/startLocal',
            url: this.url1 + this.port + '/startLocalMerge',
            method: 'get',
            params: {
              'startTime': Number(this.start_time),
              'endTime': Number(this.end_time) === 0 ? '24.0' : Number(this.end_time),
              'inputHistoryFile': this.selectflname,
            }
          }).then(() => {
            this.$refs.pict.changeFlag();
            this.$refs.pict.getCharts();
            this.$refs.pict.getInfo();
          }).catch(error => {
            // this.$Message.info("启动失败");
            console.log(error);
            alert("启动失败");
          })
        }else {
          this.$axios({
            // url: this.url2 + this.port + '/start',
            url: this.url1 + this.port + '/startMerge',
            method: 'get',
            // params: {
            //   'start_time': this.start_time,
            //   'end_time': this.end_time
            // }
          }).then(() => {
            this.$refs.pict.changeFlag();
            this.$refs.pict.getCharts();
            this.$refs.pict.getInfo();
          }).catch(error => {
            // this.$Message.info("启动失败");
            alert("启动失败");
          })
        }
      },

      // 控制程序结束
      getEnd(){
        // selectflag==0 运行merge
        // selectflag==1 运行merge_from_file
        if(this.selectflag){
          this.$axios({
            // url: this.url2 + this.port + "/stop",
            url: this.url1 + this.port + "/stop",
            method: 'get',
            // 可考虑按如下格式书写
            // data: method === 'POST' ? params : null,
            // params: method === 'GET' ? params : null,
          }).then(() => {
            this.$refs.pict.getStop();  // 停止绘图
            this.evaluateIntegration();  // 获取评估结果
            // this.$refs.img1.nowGitimg(this.pictname);  // 获取评估图片
          }).catch(error => {
            window.alert('获取评估结果失败');
            this.$refs.pict.getStop();
          })
        }else {
          this.$axios({
            // url: this.url2 + this.port + "/stop",
            url: this.url1 + this.port + "/stop",
            method: 'get',
            // 可考虑按如下格式书写
            // data: method === 'POST' ? params : null,
            // params: method === 'GET' ? params : null,
          }).then(() => {
            this.$refs.pict.getStop();  // 停止绘图
            this.evaluateIntegration();  // 获取评估结果
            // this.$refs.img0.nowGitimg(this.pictname);  // 获取评估图片
          }).catch(error => {
            window.alert('获取评估结果失败');
            this.$refs.pict.getStop();
          })
        }
      },

      handleClick(tab, event) {
        console.log(tab, event);
        if(tab.name === 'first'){
          // 触发‘first’事件
          this.changeFlag();
          // console.log("first");
        }else{
          // 触发‘second’事件
          this.getFlname();
          // console.log("second");
        }
      },

      changeFlag(){
        this.selectflag = false;
        console.log("change false");
      },

      getFlname(){  // 获取往期数据file的名称列表
        this.selectflag = true; // 选择运行往期数据merge_from_file
        console.log("change true");
        // axios.get(this.url2 + this.port + 'getHistoryData', {
        // })
        axios.get(this.url1 + this.port + '/getHistoryDataMerge', {
        })
          .then(response => {
            this.localflname = response.data;
            console.log(response.data);
            let tem = [];
            for(var i = 0, len = response.data.length; i < len; i++) {
              console.log(response.data[i]);
              let tem1 = {};
              tem1['value'] = response.data[i];
              tem.push(tem1);
            }
            // for (var i in response.data) {  //遍历数组
            //   let tem1 = {};
            //   tem1['value'] = response.data[i];
            //   tem.push(tem1);
            // }
            // for(let i=0;i<response.data.length();i++){
            //   let tem1 = {};
            //   tem1['value'] = response.data[i];
            //   tem.push(tem1);
            // }
            this.predata = tem;
            // console.log(tem);
          })
          .catch(function (error) { // 请求失败处理
            // console.log(error);
            alert("获取名称失败");
          });
      },

      searchSelect(value){ //获取选定的localfile名称
        console.log(value);
        this.selectflname = value;
      },

      getTableData0(){
        this.$axios({
          url: this.url1 + this.port + '/evaluateMerge',
          method: 'get'
        })
          .then(response => {
            let temp = response.data;
            this.pictname0 = temp['unit_errors_picName'];
            this.$refs.img0.Visible = true;

            let direction = 0, speed = 0, distance = 0, item_count = 0;
            for (let item in temp['unit_errors_mean']){
              direction += temp['unit_errors_mean'][item]['direction'];
              speed += temp['unit_errors_mean'][item]['speed'];
              distance += temp['unit_errors_mean'][item]['distance'];
              item_count = item_count + 1;
            }
            if(item_count != 0){
              direction = direction / item_count;
              speed = speed / item_count;
              distance = direction / item_count;
            }

            this.tableData0[0]['meand'] = speed.toFixed(4);  // 速度均值
            this.tableData0[1]['meand'] = direction.toFixed(4); // 航向均值
            this.tableData0[2]['meand'] = distance.toFixed(4); // 距离均值

            direction = 0, speed = 0, distance = 0, item_count = 0;
            for (let item in temp['unit_errors_std']){
              direction += temp['unit_errors_std'][item]['direction'];
              speed += temp['unit_errors_std'][item]['speed'];
              distance += temp['unit_errors_std'][item]['distance'];
              item_count = item_count + 1;
            }
            if(item_count != 0){
              direction = direction / item_count;
              speed = speed / item_count;
              distance = direction / item_count;
            }

            this.tableData0[0]['stdev'] = speed.toFixed(4);  // 速度标准差
            this.tableData0[1]['stdev'] = direction.toFixed(4); // 航向标准差
            this.tableData0[2]['stdev'] = distance.toFixed(4); // 距离标准差

            console.log(this.tableData0);

            // let a = [];
            // a.push(response.data);
            // this.tableData0 = a;
          })
          .catch(function (error) { // 请求失败处理
            // console.log(error);
            alert("数据获取失败");
          });
      },


      getTableData1(){
        this.$axios({
          url: this.url1 + this.port + '/evaluateMerge',
          method: 'get',
          // params: null
          // params: {'dirName': this.selectflname }
        })
          .then(response => {
            let temp = response.data;
            this.pictname1 = temp['unit_errors_picName'];
            this.$refs.img1.Visible = true;

            let direction = 0, speed = 0, distance = 0, item_count = 0;
            for (let item in temp['unit_errors_mean']){
              direction += temp['unit_errors_mean'][item]['direction'];
              speed += temp['unit_errors_mean'][item]['speed'];
              distance += temp['unit_errors_mean'][item]['distance'];
              item_count = item_count + 1;
            }
            if(item_count != 0){
              direction = direction / item_count;
              speed = speed / item_count;
              distance = direction / item_count;
            }

            this.tableData1[0]['meand'] = speed.toFixed(4);  // 速度均值
            this.tableData1[1]['meand'] = direction.toFixed(4); // 航向均值
            this.tableData1[2]['meand'] = distance.toFixed(4); // 距离均值

            direction = 0, speed = 0, distance = 0, item_count = 0;
            for (let item in temp['unit_errors_std']){
              direction += temp['unit_errors_std'][item]['direction'];
              speed += temp['unit_errors_std'][item]['speed'];
              distance += temp['unit_errors_std'][item]['distance'];
              item_count = item_count + 1;
            }
            if(item_count != 0){
              direction = direction / item_count;
              speed = speed / item_count;
              distance = direction / item_count;
            }

            this.tableData1[0]['stdev'] = speed.toFixed(4);  // 速度标准差
            this.tableData1[1]['stdev'] = direction.toFixed(4); // 航向标准差
            this.tableData1[2]['stdev'] = distance.toFixed(4); // 距离标准差

            console.log(this.tableData1);

            // let a = [];
            // a.push(response.data);
            // this.tableData0 = a;
          })
          .catch(function (error) { // 请求失败处理
            // console.log(error);
            alert("数据获取失败");
          });
      },


      // 获取数据评测结果 json
      evaluateIntegration(){
        // axios.get(this.url2 + this.port + '/formerresult')

        if(this.selectflag){
          this.getTableData1();
        }else {
          this.getTableData0();
        }


        // this.$axios({
        //   url: this.url1 + this.port + '/evaluateIntegration',
        //   method: 'get',
        //   params: this.selectflag ? {'dirName': this.selectflname } : null
        // })
        //   .then(response => {
        //     let temp = response.data;
        //     this.pictname = temp['unit_errors_picName'];
        //
        //     let direction = 0, speed = 0, distance = 0, item_count = 0;
        //     for (let item in temp['unit_errors_mean']){
        //       direction += temp['unit_errors_mean'][item]['direction'];
        //       speed += temp['unit_errors_mean'][item]['speed'];
        //       distance += temp['unit_errors_mean'][item]['distance'];
        //       item_count = item_count + 1;
        //     }
        //     if(item_count != 0){
        //       direction = direction / item_count;
        //       speed = speed / item_count;
        //       distance = direction / item_count;
        //     }
        //
        //     this.tableData0[0]['meand'] = speed;  // 速度均值
        //     this.tableData[1]['meand'] = direction; // 航向均值
        //     this.tableData[2]['meand'] = distance; // 距离均值
        //
        //     direction = 0, speed = 0, distance = 0, item_count = 0;
        //     for (let item in temp['unit_errors_std']){
        //       direction += temp['unit_errors_std'][item]['direction'];
        //       speed += temp['unit_errors_std'][item]['speed'];
        //       distance += temp['unit_errors_std'][item]['distance'];
        //       item_count = item_count + 1;
        //     }
        //     if(item_count != 0){
        //       direction = direction / item_count;
        //       speed = speed / item_count;
        //       distance = direction / item_count;
        //     }
        //
        //     this.tableData[0]['stdev'] = speed;  // 速度标准差
        //     this.tableData[1]['stdev'] = direction; // 航向标准差
        //     this.tableData[2]['stdev'] = distance; // 距离标准差
        //
        //     console.log(this.tableData);
        //
        //     // let a = [];
        //     // a.push(response.data);
        //     // this.tableData = a;
        //   })
        //   .catch(function (error) { // 请求失败处理
        //     // console.log(error);
        //     alert("数据获取失败");
        //   });
      },

      // 获取往期数据评测结果 json
      // evaluateIntegration(){
      //   // axios.get(this.url1 + this.port + '/formerresult')
      //   axios.get(this.url1 + this.port + '/evaluateIntegration')
      //     .then(response => {
      //       let a = [];
      //       a.push(response.data);
      //       this.tableData1 = a;
      //     })
      //     .catch(function (error) { // 请求失败处理
      //       // console.log(error);
      //       alert("分析数据获取失败");
      //     });
      // },


      // getpictname(){  // 获取图片名称，待用
      //   axios.get(this.url1 + this.port + '/pictName')
      //     .then(response => {
      //       this.pictname = response.data[0];
      //       this.getImage();
      //     })
      //     .catch(function (error) { // 请求失败处理
      //       // console.log(error);
      //       alert("图片信息获取失败");
      //     });
      // },




      // // 获取图片 已封装至组件
      // getImage(){
      //   let url = this.url1 + this.port + '/' + this.pictname;
      //   axios.get(url,{responseType: 'arraybuffer'}).then(data=>{
      //     console.log(data);
      //     this.imgUrl = 'data:image/png;base64,' + btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
      //
      //   }).catch(function(err){
      //     alert("图片信息获取失败");
      //   });
      // },


    },

  }








</script>

<style>
  .amap-demo {
    height: 300px;
  }

  .el-row {
    margin-bottom: 10px;
  &:last-child {
     margin-bottom: 10px;
   }
  }
  .el-col {
    border-radius: 40px;
  }
  .bg-purple-dark {
    background: #ffffff;
  }
  .bg-purple {
    background: #ffffff;
  }
  .bg-purple-light {
    background: #ffffff;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 40px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #ffffff;
  }

  .el-aside {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    line-height: 35px;
  }

  .el-main {
    align-items: center;
    background-color: #ffffff;
    color: #ffffff;
    text-align: center;
    line-height: 150px;


  }



</style>
